<html>
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style>
        @keyframes tail {
            6.6666666667% {
                transform: rotate(0);
            }
            10% {
                transform: rotate(10deg);
            }
            16.6666666667% {
                transform: rotate(-5deg);
            }
            20% {
                transform: rotate(30deg);
            }
            26.6666666667% {
                transform: rotate(-2deg);
            }
            46.6666666667% {
                transform: rotate(10deg);
            }
            53.3333333333% {
                transform: rotate(-5deg);
            }
            56.6666666667% {
                transform: rotate(10deg);
            }
        }
        @keyframes body {
            6.6666666667% {
                transform: scaleY(1);
            }
            10% {
                transform: scaleY(1.15);
            }
            16.6666666667% {
                transform: scaleY(1);
            }
            20% {
                transform: scaleY(1.25);
            }
            26.6666666667% {
                transform: scaleY(1);
            }
            46.6666666667% {
                transform: scaleY(1.15);
            }
            53.3333333333% {
                transform: scaleY(1);
            }
            56.6666666667% {
                transform: scaleY(1.15);
            }
        }
        @keyframes left-whisker {
            6.6666666667% {
                transform: rotate(0);
            }
            10% {
                transform: rotate(0deg);
            }
            16.6666666667% {
                transform: rotate(-5deg);
            }
            20% {
                transform: rotate(0deg);
            }
            26.6666666667% {
                transform: rotate(0deg);
            }
            46.6666666667% {
                transform: rotate(10deg);
            }
            53.3333333333% {
                transform: rotate(-5deg);
            }
            56.6666666667% {
                transform: rotate(10deg);
            }
        }
        @keyframes right-whisker {
            6.6666666667% {
                transform: rotate(180deg);
            }
            10% {
                transform: rotate(190deg);
            }
            16.6666666667% {
                transform: rotate(180deg);
            }
            20% {
                transform: rotate(175deg);
            }
            26.6666666667% {
                transform: rotate(190deg);
            }
            46.6666666667% {
                transform: rotate(180deg);
            }
            53.3333333333% {
                transform: rotate(185deg);
            }
            56.6666666667% {
                transform: rotate(175deg);
            }
        }
        @keyframes left-ear {
            0% {
                transform: rotate(-20deg);
            }
            6.6666666667% {
                transform: rotate(-6deg);
            }
            13.3333333333% {
                transform: rotate(-15deg);
            }
            26.6666666667% {
                transform: rotate(-15deg);
            }
            33.3333333333% {
                transform: rotate(-30deg);
            }
            40% {
                transform: rotate(-30deg);
            }
            46.6666666667% {
                transform: rotate(0deg);
            }
            53.3333333333% {
                transform: rotate(0deg);
            }
            60% {
                transform: rotate(-15deg);
            }
            80% {
                transform: rotate(-15deg);
            }
            93.3333333333% {
                transform: rotate(-6deg);
            }
            100% {
                transform: rotateZ(-6deg);
            }
        }
        @keyframes right-ear {
            0% {
                transform: rotateZ(-16deg);
            }
            6.6666666667% {
                transform: rotateZ(-16deg);
            }
            13.3333333333% {
                transform: rotateZ(-19deg);
            }
            26.6666666667% {
                transform: rotateZ(-19deg);
            }
            33.3333333333% {
                transform: rotateZ(-30deg);
            }
            36.6666666667% {
                transform: rotateZ(-19deg);
            }
            37.3333333333% {
                transform: rotateZ(-30deg);
            }
            38% {
                transform: rotateZ(-19deg);
            }
            40% {
                transform: rotateZ(-19deg);
            }
            40.6666666667% {
                transform: rotateZ(-30deg);
            }
            41.3333333333% {
                transform: rotateZ(-19deg);
            }
            46.6666666667% {
                transform: rotateZ(-9deg);
            }
            53.3333333333% {
                transform: rotateZ(-9deg);
            }
            60% {
                transform: rotateZ(-19deg);
            }
            60.6666666667% {
                transform: rotateZ(-30deg);
            }
            61.3333333333% {
                transform: rotateZ(-19deg);
            }
            62.6666666667% {
                transform: rotateZ(-19deg);
            }
            63.3333333333% {
                transform: rotateZ(-30deg);
            }
            64% {
                transform: rotateZ(-19deg);
            }
            80% {
                transform: rotateZ(-19deg);
            }
            93.3333333333% {
                transform: rotateZ(-16deg);
            }
            100% {
                transform: rotateZ(-16deg);
            }
        }
        body {

            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .main {
            height: 400px;
            width: 400px;
            position: relative;
        }

        .main .cat {
            width: 110px;
            height: 50px;
            position: absolute;
            top: calc(5%);
            right: 90px;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
        }
        .main .cat .body {
            width: 110px;
            height: 50px;
            background-color: #745260;
            position: absolute;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            animation: body 12s none infinite;
        }
        .main .cat .head {
            content: "";
            width: 70px;
            height: 35px;
            background-color: #745260;
            position: absolute;
            top: calc(50% - 10px);
            left: -40px;
            border-top-left-radius: 80px;
            border-top-right-radius: 80px;
        }

        .tail-container {
            position: absolute;
            right: 0;
            bottom: -13px;
            z-index: 3;
        }

        .tail {
            position: absolute;
            height: 30px;
            width: 14px;
            bottom: -10px;
            right: 0;
            border-bottom-right-radius: 5px;
            background: #745260;
            z-index: 0;
        }
        .tail > .tail {
            animation: tail 12s none infinite;
            height: 100%;
            width: 14px;
            transform-origin: left;
            border-bottom-left-radius: 20px 20px;
            border-bottom-right-radius: 20px 20px;
            border-top-right-radius: 40px;
        }

        .ear {
            position: absolute;
            left: 4px;
            top: -4px;
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 20px solid #745260;
            transform: rotate(-30deg);
            animation: left-ear 12s both infinite;
        }
        .ear + .ear {
            animation: right-ear 12s both infinite;
            top: -12px;
            left: 30px;
        }

        .nose {
            position: absolute;
            bottom: 10px;
            left: -10px;
            background-color: #fd6e72;
            height: 5px;
            width: 5px;
            border-radius: 50%;
        }

        .whisker-container {
            position: absolute;
            bottom: 5px;
            left: -36px;
            width: 20px;
            height: 10px;
            transform-origin: right;
            animation: left-whisker 12s both infinite;
        }
        .whisker-container:nth-child(2) {
            left: -20px;
            bottom: 12px;
            transform-origin: right;
            transform: rotate(180deg);
            animation: right-whisker 12s both infinite;
        }

        .whisker {
            position: absolute;
            top: 0;
            width: 100%;
            border: 1px solid #fdf9de;
            transform-origin: 100% 0;
            transform: rotate(10deg);
        }
        .whisker:last-child {
            top: 0;
            transform: rotate(-20deg);
        }
        div {
            width: 150px;
            margin: 1px auto;
        }
        .tip {
            color: #bbb;
            font-size: 16px;
        }
        .backBtn {
            width: 110px;
            height: 40px;
            line-height: 40px;
            background: #fff;
            border-radius: 5px;
            border: 1px solid #ff9515;
            color: #ff9515;
            font-size: 24px;
            margin-top: 30px;
        }

    </style>
    <script language="JavaScript">
        function reload() {
            Flutter.postMessage('reload');
        }
    </script>
</head>
<body>
<div class="main">

    <div class="cat">
        <div class="body"></div>
        <div class="head">
            <div class="ear"></div>
            <div class="ear"></div>
        </div>
        <div class="face">
            <div class="nose"></div>
            <div class="whisker-container">
                <div class="whisker"></div>
                <div class="whisker"></div>
            </div>
            <div class="whisker-container">
                <div class="whisker"></div>
                <div class="whisker"></div>
            </div>
        </div>
        <div class="tail-container">
            <div class="tail">
                <div class="tail">
                    <div class="tail">
                        <div class="tail">
                            <div class="tail">
                                <div class="tail">
                                    <div class="tail"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top: 150px;position: absolute;right: 0px;left: -30;">
            <span class="tip">你的猫睡着啦，再刷新试试吧</span>
        </div>
        <div style="margin-top: 180px;position: absolute;right: 0px;left: -30;">
            <button onclick="reload()" class="backBtn">刷新</button>
        </div>

    </div>
</div>
</body>
</html>



